import React, { Component } from 'react';
import { StyleSheet, Text, Image, TouchableOpacity, PixelRatio } from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';

const scale = GLOBAL.SCALE;
const arrowDown = require('../../../imgs/Group.png');

export class CommonSelect extends Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}

	componentWillMount () {

	}

	render () {
		const { value, checkItem, checkSelect, showSelectList, ifPullDown, selectTypeLabel } = this.props;

		return (
			<TouchableOpacity style={styles.selectItems} activeOpacity={1}
				onPress={() => {
					checkSelect();
				}}>
				{selectTypeLabel ? <Text style={styles.selectTypeLabel}>{selectTypeLabel}</Text> : null}
				<Text style={styles.selectDefaultVal}>{value}</Text>
				<Image source={arrowDown} style={[styles.selectedIcon, { transform: ifPullDown ? [{ rotateX: '180deg' }] : [{ rotateX: '360deg' }] }]} />
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	selectItems: {
		flex: 1,
		height: 44 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
	},
	selectTypeLabel: {
		fontSize: 14 * scale,
		color: style.color.normal,
		marginRight: 10 * scale
	},
	selectDefaultVal: {
		fontSize: 14 * scale,
		color: style.color.normal,
		marginRight: 10 * scale
	},
	selectedIcon: {
		width: 8 * scale,
		height: 5 * scale,
		tintColor: style.color.dark
	}
})